<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>条码转换记录</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
	<span class="layui-breadcrumb">
		<a href="">首页</a>
		<a>
		  <cite>条码转换记录</cite>
		</a>
	</span>
</div>
<script type="text/html" id="rowToolbar">
	{{#  if(d.status == 1){ }}
		<a class="layui-btn layui-btn-xs" lay-event="confirm"><i class="layui-icon layui-icon-edit"></i>确认</a>
	{{#  } }}
</script>
<div class="x-body">
	<div style="margin-bottom: 18px">
		<div class="layui-inline">
			<table>
				<tr>
					<td>
						<div class="layui-form" style="width: 180px; margin-left: 10px">
						<input type="hidden" id="customer" name="customer"  value="${cid}" >
					<input type="hidden" id="cname" name="cname"  value="${cname}" >
						<input type="text" name="customer1" id="customer1"  value="${cname}"  style="width: 150px"class="layui-input">
							<%-- <select id="customer" name="customer">
								<option value="">请选择供应商</option>
								<c:forEach items="${customer_type0}" var="customer">
									<option value="${customer.id}">${customer.customer_name}</option>
								</c:forEach>
							</select> --%>
						</div>
					</td>
					<td>
						<div class="layui-form" style="width: 180px; margin-left: 10px">
							<input class="layui-input" id="materiel_num" placeholder="请输入SAP/QAD">
						</div>
					</td>
					<td>
						<div class="layui-form" style="width: 180px; margin-left: 10px">
							<input class="layui-input" id="operate_type" placeholder="请输入操作内容">
						</div>
					</td>
					<td>
						<div class="layui-form" style="width: 180px; margin-left: 10px">
							<select id="user" name="user">
								<option value="">请选择操作人</option>
								<c:forEach items="${allSysUserList}" var="user">
									<option value="${user.id}">${user.userName}</option>
								</c:forEach>
							</select>
						</div>
					</td>
					<td class="layui-input-inline">
						<input class="layui-input" id="start_time" placeholder="请选择开始时间" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px"> -
						<input class="layui-input" id="end_time" placeholder="请选择结束时间" autocomplete="off" style="display: inline; width: 180px;">
					</td>
				</tr>
			</table>
		</div>
		<button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
	</div>
	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
</div>

<script type="text/javascript">
    layui.use(['table','layer','upload','form','laydate'], function(){
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;
        
        laydate.render({
            elem: '#start_time',
            type: 'datetime'
        });
        laydate.render({
            elem: '#end_time',
            type: 'datetime'
        });

        var $ = layui.jquery, active = {
            reload:function () {
                var customer = $("#customer").val();
                var materiel_num = $("#materiel_num").val();
                var user = $("#user").val();
                var start_time = $("#start_time").val();
                var end_time = $("#end_time").val();
                var operate_type = $("#operate_type").val();

                table.reload('tableListId',{
                    method:'get',
                    where:{
                        keyword01:customer,
                        keyword02:materiel_num,
                        keyword03:user,
                        keyword04:start_time,
                        keyword05:end_time,
                        keyword06:operate_type,
                    }
                    ,page: {
                        //重新从第 1 页开始
                        curr: 1
                    }
                });
            }
        }

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        var keyword01 = $("#customer").val();
        table.render({
            elem: '#tableList'
            ,url:'${pageContext.request.contextPath }/app/queryBarCodeConversionRecordCriteria.do?keyword01='+keyword01
            ,toolbar: '#toolbar'
            //,title: 'machineList'
            ,id :'tableListId'
            ,limits:[10,20,30]
            //,defaultToolbar:['filter', 'print']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'', title:'序号', sort: true, type:'numbers', width: 60}
                ,{field:'customer_name', title:'供应商名称'}
                ,{field:'materiel_name', title:'物料名称'}
                ,{field:'materiel_num', title:'SAP/QAD'}
                ,{field:'materiel_count', title:'条码数量'}
                ,{field:'operate_name', title:'操作人'}
                ,{field:'operate_time', title:'操作时间',
                    templet: function(d){
                        return d.operate_time ? layui.util.toDateString(d.operate_time, 'yyyy-MM-dd HH:mm:ss') : '';
                    }
				}
                ,{field:'prefix_code', title:'操作条码'}
                ,{field:'operate_type', title:'操作内容'}
                ,{field:'trans_reason', title:'转换原因'}
                ,{field:'img_url', title:'图片', 
                	templet:function (d){
                		if(d.img_url == ''){
                			return "无图片";
        		    	} else {
        		            return '<div class="display-photos"><img src="${pageContext.request.contextPath }/rcode/simplification/'+d.img_url+'" alt="" width="50px" height="50px"></a></div>';
        		    	}
    		    	}
                }
                ,{fixed:'right', unresize: true, title:'操作', toolbar: '#rowToolbar', width:100, align: 'center'}
            ]]
            ,page: true
            ,done : function(){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
                layer.photos({
                    photos: '.display-photos'
                    ,anim: 1 
                	,area: ['800px','600px']
                });
            }
        });

        //确认按钮事件
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            if(obj.event === 'confirm'){
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/app/updateConfirm.do',
					data: {id:data.id},
                    success:function (data) {
                        if (data > 0) {
                            toastrStyle();
                            toastr.success('转换成功');
                            setTimeout(function(){
                                location.reload();
                            },1000);
						} else {
                            toastrStyle();
                            toastr.error('转换失败');
                            setTimeout(function(){
                                location.reload();
                            },1000);
						}
                    }
                });
            }
        });
    });
</script>
</body>
</html>
